<template>
    <div class="smsCont">
        <div class="header">
            淘宝账户登录
        </div>
         <form action="">
            <div class="account">
                <div class="text">手机号</div>
                <input type="text" placeholder="请输入手机号码" v-model="account" @blur="out1()" @focus="go1()" v-on:input="allInput()">
                <span class="iconfont close" @click="close1" v-show="ok1">&#xe641;</span>
            </div>
            <div class="account">
                <div class="text">短信检验码</div>
                <input type="number" placeholder="短信校验码" v-model="password" @blur="out2()" @focus="go2()" v-on:input="allInput()" class="number">
                <span class="iconfont close smsClose" @click="close2" v-show="ok2">&#xe641;</span>
                <div class="prompt">获取短信验证码</div>
            </div>
            <div class="submit">
                <button type="submit" class="button" id="submit-btn" :disabled="disabled" :class="{'active':active}">登 录</button>
            </div>
            <div class="otherLink">
                <div class="ftLeft">免费注册</div>
            </div>
            <router-link to="/Login" tag="div" class="sms">
               账户密码登录
            </router-link>
        </form>
    </div>
</template>

<script>
    export default{
        name:"SmsCont",
        data(){
            return {
                account:"",
                password:"",
                ok1:false,
                ok2:false,
                active:false,
                disabled:true
            }
        },
        watch:{
            account(){
                if(!this.account==""){
                    this.ok1 = true
                }else{
                    this.ok1 = false
                }
            },
            password(){
                if(!this.password==""){
                    this.ok2 = true
                }else{
                    this.ok2 = false
                }
            }
        },
        methods:{
            close1(){
                this.account = ""
            },
            close2(){
                this.password = ""
            },
            out1(){
                this.ok1 = false
            },
            out2(){
                this.ok2 = false
            },
            go1(){
                if(!this.account==""){
                    this.ok1 = true
                }else{
                    this.ok1 = false
                }
            },
            go2(){
                if(!this.password==""){
                    this.ok2 = true
                }else{
                    this.ok2 = false
                }
            },
            allInput(){
                if(!this.account=="" && !this.password==""){
                    this.active = true
                    this.disabled = false
                }else{
                    this.active = false
                    this.disabled = true
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
.smsCont
    width 100%
    height 6.67rem
    background-color #f0f0f0
    .header
        width 100%
        height 0.44rem  
        line-height 0.44rem
        margin-bottom 0.2rem
        border-bottom: 1px solid #c8c8c8
        font-size 0.18rem
        text-align center
        background-color #f7f7f8
    .account
        position relative
        height 0.5rem
        background-color #fff
        border-bottom:1px solid #ddd 
        .text
            position absolute
            top 0
            left 0.2rem
            width 0.82rem
            height 0.5rem
            line-height 0.5rem
            font-size 0.16rem
            text-align left 
            color #6c6c6c
        input 
            position absolute
            top 0
            left: 0.95rem;
            width: 2.3rem;
            height: 0.5rem;
            padding-right: 0.5rem;
            line-height: 0.5rem;
        .number 
            width 0.8rem
            left 1.1rem
        .prompt
            position absolute
            top 0
            right 0.2rem
            height 0.3rem
            line-height 0.3rem
            margin-top 0.1rem
            padding-left 0.1rem
            border-left 1px solid #d2d2d2
            color #f40
        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder 
            /* WebKit browsers */ 
            color: #ddd; 
        
        input:-moz-placeholder, textarea:-moz-placeholder 
        /* Mozilla Firefox 4 to 18 */ 
        color: #ddd
        
        input::-moz-placeholder, textarea::-moz-placeholder 
         /* Mozilla Firefox 19+ */ 
        color: #ddd 
        
        input:-ms-input-placeholder, textarea:-ms-input-placeholder 
         /* Internet Explorer 10+ */ 
        color: #ddd 
        .close
            position absolute
            right 0.2rem
            top 0
            width 0.3rem
            height  0.5rem
            text-align right
            font-size: 0.22rem
            line-height 0.5rem
            color #6c6c6c
        .smsClose
            left 1.9rem    
    .submit
        width 3.35rem
        height 0.44rem
        margin 0 auto
        margin-top 0.2rem
        button
            width 100%
            height 100%
            background-color #ff0036
            border:1px solid #ff0036
            line-height 0.44rem
            border-radius:0.05rem
            color #d4d4d4
        .active
            color #fff    
    .otherLink
        width 3.35rem
        height 0.44rem
        margin 0 auto
        margin-top 0.1rem
        .ftLeft
            float left
            height 0.44rem
            line-height 0.44rem 
            text-align left
            color #ff0036
            font-size 0.16rem
        .ftRight
            float right
            height 0.44rem
            line-height 0.44rem 
            text-align right
            color #ff0036
            font-size 0.16rem
    .sms
        width 1.2rem
        padding 0.1rem
        margin 0 auto
        border-radius 0.04rem
        text-align center
        border: 1px solid #f40
        color #ff0036
</style>

